<template>
  <div v-if="issueData">
    <div v-for="(item, index) in issueData" :key="index" class="issue-item">
      <div class="issue-info">
        <div class="issue-user reply-item">
          <div>
            <el-avatar
              style="background: transparent"
              :size="30"
              shape="square"
              cross-origin
              :src="formatUrl(item.createUser?.headPhoto)"
            />
          </div>
          <div class="reply-item__desc">
            <div class="df-alc-jcsb">
              <div>
                <span class="reply-name">{{ item.createUser?.name }}</span>
                <span class="reply-time">{{ item.createTime }}</span>
              </div>
            </div>
          </div>
        </div>
        <el-row>
          <el-col :span="8" class="detail-info-item">
            <div class="detail-info__label">优先级</div>
            <div class="detail-info__content">{{ item.priorityValue }}</div>
          </el-col>
          <el-col :span="16" class="detail-info-item">
            <div class="detail-info__label">到期日</div>
            <div class="detail-info__content">
              {{ item.endTime?.substr(0, 10)
              }}<span v-if="item.timeout" class="timeout-tag">超时</span>
            </div>
          </el-col>
          <!-- <el-col :span="8" class="detail-info-item">
              <div class="detail-info__label">分类</div>
              <div class="detail-info__content">{{ item.typeValue }}</div>
            </el-col>-->
        </el-row>
        <el-row>
          <el-col class="detail-info-item">
            <div class="detail-info__label">质疑</div>
            <div class="detail-info__content">{{ item.content }}</div>
          </el-col>
        </el-row>

        <div class="reply-list">
          <div
            v-for="val in item.reply"
            :key="val.id"
            class="reply-item"
            @mouseenter="handleMouseenter(val)"
            @mouseleave="handleMouseleave"
          >
            <div>
              <el-avatar
                style="background: transparent"
                :size="30"
                shape="square"
                cross-origin
                :src="formatUrl(val.createUser?.headPhoto)"
              />
            </div>
            <div class="reply-item__desc">
              <div class="df-alc-jcsb">
                <div>
                  <span class="reply-name">{{ val.createUser?.name }}</span>
                  <span class="reply-time">{{ val.createTime }}</span>
                </div>

                <div
                  v-if="val.createUser?.uid === uid && currentReply?.id === val.id"
                  class="reply-operator"
                >
                  <el-icon :size="20" @click="editReply(val)">
                    <edit />
                  </el-icon>
                  <!-- <el-icon :size="20" @click="delReply(val.id)">
                      <delete />
                    </el-icon>-->
                </div>
              </div>
              <div class="reply-item__content">
                <div v-if="showEdit && editReplyId === val.id">
                  <el-input v-model="replyEdit" type="textarea" />
                  <div class="reply-btn">
                    <el-button size="small" @click="cancelReply">取消</el-button>
                    <el-button type="primary" size="small" @click="editSubmit(val)">确认</el-button>
                  </div>
                </div>
                <div v-else class="reply-info">
                  <span>回复：</span>
                  <span class="reply-info__content">{{ val.content }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="reply-input">
          <el-input v-model="reply" type="textarea" :autosize="{ minRows: 8 }" />
          <div class="reply-btn">
            <el-button type="primary" size="small" @click="submit(item)">回复</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, watchEffect } from 'vue'

import { ElMessage } from 'element-plus'

import { useUserStore } from '@/store/user'

import { formatUrl } from '@/utils/common/formatUrl'
import { useConfirm } from '@/utils/common/useConfirm'

import IBaseObj from '#/index'

const { uid } = useUserStore()

const props = defineProps({
  detail: {
    type: Object,
    default: () => {},
  },
})

const issueData = computed(() => props.detail?.issue)

watchEffect(() => {
  if (issueData.value) {
    issueData.value.forEach((v: IBaseObj) => {
      const timeout =
        +new Date(v?.endTime?.substr(0, 10)) - +new Date(new Date().toLocaleDateString())
      if (timeout < 0 || v.reply?.length === 0) {
        v.timeout = true
      } else {
        v.timeout = false
      }
    })
  }
})

const emits = defineEmits(['search'])

const reply = ref('')
const showEdit = ref(false)
const replyEdit = ref('')
const currentReply: IBaseObj = ref({})
const editReplyId = ref(-1) // 当前点击了编辑的

const handleMouseenter = (val: IBaseObj) => {
  currentReply.value = val
}

const handleMouseleave = () => {
  if (showEdit.value) {
    return
  }
  currentReply.value = {}
  showEdit.value = false
}

const submit = async (val: any) => {
  // const ret = await QueryApi.saveQueryReply({
  //   qid: val.qid,
  //   content: reply.value,
  // })
  // if (ret) {
  //   reply.value = ''
  //   ElMessage({ message: '回复成功！', type: 'success' })
  //   emits('search')
  // }
}

const editReply = (val: IBaseObj) => {
  replyEdit.value = val.content
  showEdit.value = true
  editReplyId.value = val.id
}

const editSubmit = async (val: IBaseObj) => {
  // const ret = await QueryApi.saveQueryReply({
  //   id: val.id,
  //   content: replyEdit.value,
  // })
  // if (ret) {
  //   ElMessage({ message: '修改成功！', type: 'success' })
  //   currentReply.value.reply = replyEdit.value
  //   showEdit.value = false
  //   emits('search')
  //   // emits('search-reply')
  // }
}

const cancelReply = () => {
  replyEdit.value = ''
  showEdit.value = false
}

const delReply = (id: number) => {
  useConfirm(
    {
      message: '是否删除该回复？',
    },
    async () => {
      // const ret = await IssuesApi.deleteReply(id)
      // if (ret) {
      //   ElMessage({ message: '删除成功！', type: 'success' })
      //   emits('search')
      //   // emits('search-reply')
      // }
    }
  )
}
</script>

<style lang="scss" scoped>
.reply {
  &-list {
    margin: 10px 0;
  }

  &-item {
    display: flex;
    padding-bottom: 10px;
    margin-bottom: 10px;
    // cursor: pointer;

    &__content {
      margin-top: 3px;
    }

    &__desc {
      flex: 1;
      margin-left: 10px;
    }

    &:hover {
      .reply-operator {
        display: block;
      }
    }
  }

  &-name {
    margin-right: 10px;
    font-weight: 600;
  }

  &-time {
    font-size: 13px;
    color: var(--color-2);
  }

  &-btn {
    margin-top: 10px;
    text-align: right;
  }

  &-operator {
    // display: none;
    .el-icon {
      margin-left: 10px;

      &:hover {
        color: var(--color-primary);
      }
    }
  }

  &-info {
    display: flex;

    &__content {
      flex: 1;
      word-break: break-word;
    }
  }
}

.df {
  display: flex;
}

.df-alc-jcsb {
  display: flex;
  height: 20px;
  align-items: center;
  justify-content: space-between;
}

.detail-info {
  &-item {
    display: flex;
    margin-bottom: 18px;
    line-height: 32px;
  }

  &__label {
    width: 80px;
    padding-right: 12px;
    font-size: var(--el-form-label-font-size);
    font-weight: 700;
    color: var(--el-text-color-regular);
    text-align: right;
  }
}

.issue {
  &-user {
    margin-right: 20px;
  }

  &-content {
    flex: 1;
    word-break: break-word;
  }
}
</style>
